﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://jq22.qiniudn.com/masonry-docs.min.js"></script>
    <link href="~/Themes/GodMother/_misc/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Themes/GodMother/_misc/css/bootstrap-theme.css" rel="stylesheet" />
    <link href="~/Themes/GodMother/_misc/css/common.css" rel="stylesheet" />
    <link href="~/Themes/GodMother/_misc/css/home.css" rel="stylesheet" />
    <style>
        body {
            background-color: #F1F1F1;
        }

        .container-fluid {
            padding: 100px 20px 0 20px;
            width: 1300px;
        }

        .box {
            margin-bottom: 20px;
            float: left;
            width: 400px;
            margin-left: 10px;
        }

            .box img {
                max-width: 100%;
            }
        .navbar-default .navbar-nav > li > a {
            color: #333;
        }
    </style>
</head>
<body>
    <header class="home">
        <div class="container">
            <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header logo">
                    <img src="~/Themes/GodMother/_misc/images/logo.png" width="400" />
                </div>
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                    <ul class="nav navbar-nav nav-tabs navbar-right">
                       
                        <li>
                            <a href="/Index">Home</a>
                        </li>
                        <li>
                            <a href="/Index">Contact</a>
                        </li>
                        <li>
                            <a href="/Index">About</a>
                        </li>
                        <li>
                            <img src="~/Themes/GodMother/_misc/images/mous.png" width="180" style="padding:5px 0 0 10px" />
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </header>
    <div id="masonry" class="container-fluid">
        <div class="box">
            <img src="~/Themes/GodMother/_misc/images/section1.jpg" />
        </div>
        <div class="box">
            <img src="~/Themes/GodMother/_misc/images/section2.jpg" />
        </div>
        <div class="box">
            <img src="~/Themes/GodMother/_misc/images/section3.jpg" />
        </div>
        <div class="box">
            <img src="~/Themes/GodMother/_misc/images/section4.jpg" />
        </div>
        <div class="box">
            <img src="~/Themes/GodMother/_misc/images/section5.jpg" />
        </div>
        <div class="box">
            <img src="~/Themes/GodMother/_misc/images/section6.jpg" />
        </div>
        <div class="box">
            <img src="~/Themes/GodMother/_misc/images/section7.jpg" />
        </div>
        <div class="box">
            <img src="~/Themes/GodMother/_misc/images/section8.jpg" />
        </div>
        <div class="box">
            <img src="~/Themes/GodMother/_misc/images/section9.jpg" />
        </div>
    </div>
    <script>
        $(function () {
            var $objbox = $("#masonry");
            var gutter = 25;
            var centerFunc, $top0;
            $objbox.imagesLoaded(function () {
                $objbox.masonry({
                    itemSelector: "#masonry > .box",
                    gutter: gutter,
                    isAnimated: true
                });
                centerFunc = function () {
                    $top0 = $objbox.children("[style*='top: 0']");
                    $objbox.css("left", ($objbox.width() - ($top0.width() * $top0.length + gutter * ($top0.length - 1))) / 2).parent().css("overflow", "hidden");
                };
                centerFunc();
            });
            var tur = true;
            $(window).resize(function () {
                if (tur) {
                    setTimeout(function () {
                        tur = true;
                        centerFunc();
                    },
                    1000);
                    tur = false;
                }
            });
        });
    </script>
</body>
</html>